<script>

export default {
  name: "FrontPage",
  data() {
    return {
      def_url: '1',
      navMenus: [],
      searchQuery: '',
      books: [],
      recommendedBooks: [],
      leaderboard:[],
      excellentReaders: [],
      noticeTopic:[],
      dialogVisible: false,
      selectedNotice: {},
      images: [
        require('@/assets/lunbo1.png'),
        require('@/assets/lunbo2.png'),
        require('@/assets/lunbo3.png'),
        require('@/assets/lunbo4.png')
      ],



    };
  },
  methods: {
    toBookDetail(bookInfo){
      let id=bookInfo.id
      this.$router.push({path: 'book_detail', query: {id}})
    },
    async getBooks1(){
      const {data: res}=await this.$axios.get("bookInfo/books")
      this.books = res.data
    },
    async getBooks2(){
      const {data: res}=await this.$axios.get("bookInfo/recommendedBooks")
      this.recommendedBooks = res.data
    },
    async getLeaderboard(){
      const {data: res}=await this.$axios.get("reader/leaderboard")
      this.leaderboard = res.data
    },
    async getExcellentReaders(){
      const {data: res}=await this.$axios.get("reader/excellentReaders")
      this.excellentReaders = res.data
    },
    async getNoticeTopic(){
      const {data: res}=await this.$axios.get("notice/noticeTopic")
      this.noticeTopic = res.data
    },
    showNotice(notice) {
      this.selectedNotice = notice;
      this.dialogVisible = true;
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        timeZone: 'Asia/Shanghai',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    },
    },

  mounted() {
    this.getBooks1()//获取书本轮播数据
    this.getBooks2()//获取推荐书本数据
    this.getLeaderboard()//获取读者排行榜
    this.getExcellentReaders()//获取优秀读者榜
    this.getNoticeTopic()//获取公告标题
  },

  computed: {
    bookPages() {
      const pageSize = 9; // 每页显示9本书
      const pages = [];
      for (let i = 0; i < this.books.length; i += pageSize) {
        pages.push(this.books.slice(i, i + pageSize));
      }
      return pages;
    },
    excellentReaderPages() {
      const pageSize = 12; // 每页显示12个优秀读者
      const pages = [];
      for (let i = 0; i < this.excellentReaders.length; i += pageSize) {
        pages.push(this.excellentReaders.slice(i, i + pageSize));
      }
      return pages;
    }
  }
};
</script>

<template>
  <el-container>
    <el-main>
      <div class="main-content">
        <div class="carousel-container">
          <el-carousel height="250px">
            <el-carousel-item v-for="(image, index) in images" :key="index">
              <img :src="image" alt="" style="width: 100%; height: 100%;">
            </el-carousel-item>
          </el-carousel>
        </div>
        <br>
        <div class="title"><img src="@/assets/title.png"></div>
        <div class="content-container">
          <div class="book-carousel">
            <el-carousel height="400px">
              <el-carousel-item v-for="(page, pageIndex) in bookPages" :key="pageIndex">
                <div class="book-grid">
                  <div @click="toBookDetail(book, bookIndex)" v-for="(book, bookIndex) in page" :key="bookIndex" class="book-item">
                    <img :src="book.picture" alt="Book Cover" class="book-image"> <!-- 注意这里使用 book.picture -->
                    <div class="book-details">
                      <p class="book-title">{{ book.name }}</p> <!-- 注意这里使用 book.name -->
                      <p class="book-author">{{  book.author }}</p>
                      <p class="book-description">{{ book.introduction }}</p>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="news-section">
            <h2>最新资讯</h2>
            <ul>
              <li v-for="(notice, index) in noticeTopic" :key="index" @click="showNotice(notice)">
                {{ notice.topic }}
              </li>
            </ul>
          </div>
            <el-dialog :visible.sync="dialogVisible" width="50%">
              <div class="notice-content">
                <div class="notice-header">
                  <span class="notice-author">{{ selectedNotice.author }}</span>
                  <span class="notice-createTime">{{ formatDate(selectedNotice.createdate) }}</span>
                </div>
                <div class="notice-body">
                  <p v-html="selectedNotice.content">{{ selectedNotice.content }}</p>
                </div>
              </div>
                <span slot="footer" class="dialog-footer">
               <el-button @click="dialogVisible = false">关闭</el-button>
              </span>
            </el-dialog>
        </div>
        <div class="title"><img src="@/assets/title1.png"></div>
        <div class="ranking-container">
          <div class="readers-ranking">
            <h2>读者排行榜</h2>
            <ul>
              <li v-for="(reader, index) in leaderboard" :key="index">
                {{ index + 1 }}. <!-- 添加序号 -->
                <img :src="reader.icon" alt="Reader Avatar" class="reader-avatar1">
                {{ reader.realname }}
              </li>
            </ul>
          </div>
          <div class="excellent-readers">
            <h2>优秀读者榜</h2>
            <el-carousel height="400px" direction="vertical">
              <el-carousel-item v-for="(page, pageIndex) in excellentReaderPages" :key="pageIndex">
                <div class="reader-grid">
                  <div v-for="(reader, readerIndex) in page" :key="readerIndex" class="reader-item">
                    <img :src="reader.icon" alt="Reader Avatar" class="reader-avatar2">
                    <p class="reader-name">{{ reader.realname }}</p>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <aside class="sidebar sidebar-with-background">
            <h2>图书推荐榜</h2>
            <ul class="recommended-books">
              <li @click="toBookDetail(book, index)" v-for="(book, index) in recommendedBooks" :key="index" class="recommended-book-item">
                <img :src="book.picture" alt="Book Cover" class="recommended-book-image">
                <div class="recommended-book-details">
                  <p class="recommended-book-title">{{ book.name }}</p>
                  <p class="recommended-book-author">{{ book.author }}</p>
                </div>
              </li>
            </ul>
          </aside>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
.header-content {
  position: relative; /* 添加相对定位 */
  height: 100%; /* 让 header-content 占据 el-header 的全部高度 */
}

.logo-and-menu {
  display: flex;
  justify-content: space-between; /* 将子元素水平分布 */
  width: 100%;
  align-items: center; /* 垂直居中 */
  position: relative; /* 添加相对定位 */
  z-index: 1001; /* 确保在轮播图下方 */
  padding: 10px; /* 添加内边距 */
}

.search-and-user {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.user-info {
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 添加间距 */
  margin-left: 20px; /* 添加间距 */
}

.carousel-container {
  width: 100%;
  height: 250px; /* 设置与新的轮播图相同的高度 */
}

.el-header {
  background-color: transparent;
  color: #333;
  text-align: center;
  height: 80px;
  position: relative;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: left; /* 文本靠左对齐 */
  padding: 20px; /*添加内边距 */
}

.main-content {
  width: 100%;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}
.title img {
  width: 110px; /* 根据需要调整宽度 */
  height: auto; /* 保持图片比例 */
}

.content-container {
  display: grid;
  grid-template-columns: 3fr 1fr; /* 轮播图占2份，资讯占1份 */
  gap: 20px;
}

.book-carousel {
  width: 100%;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 减小间距 */
}

.book-item {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  padding: 5px;
  background-color: #fff;
}

.book-image {
  width: 80px;
  height: 120px;
  object-fit: cover;
  margin-right: 10px; /*减小间距 */
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}

.book-image:hover {
  transform: scale(1.1); /* 放大1.1倍 */
}

.book-details {
  flex-grow: 1;
}

.book-title {
  font-size: 16px; /* 减小字体大小 */
  margin: 0;
  transition: color 0.3s ease; /* 添加过渡效果 */
}
.book-title:hover {
  color: #007bff; /* 鼠标悬停时文字变为蓝色 */
}


.book-author {
  font-size: 12px; /* 减小字体大小 */
  color: #666;
  margin: 3px 0; /*减小间距 */
}

.book-description {
  font-size: 12px; /* 减小字体大小 */
  color: #999;
  margin: 3px 0; /* 减小间距 */
}

.news-section {
  background-image: url('@/assets/beijing1.png'); /* 添加背景图 */
  background-size: cover; /* 使背景图覆盖整个容器 */
  background-position: center; /* 将背景图居中 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  padding: 20px;
  border: 1px solid #ddd;

}
.news-section li {
  font-size: 20px; /* 调整字体大小 */
  cursor: pointer; /* 添加鼠标悬停效果 */
  padding: 5px 0; /* 添加内边距 */
  margin-left: 30px;
}

.el-menu {
  background-color: transparent;
  text-color: #FF6347; /* 改为醒目的橙色 */
}

.el-menu-item {
  color: #FF6347; /* 改为醒目的橙色 */
}

.el-menu-item.is-active {
  color: #ffd04b; /* 激活状态的颜色 */
}

.ranking-container {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: space-between; /* 两端对齐 */
  gap: 20px; /* 添加间距 */
}

.readers-ranking {
  background-image: url('@/assets/beijing1.png'); /* 替换为你的背景图路径 */
  background-size: cover; /* 使背景图覆盖整个容器 */
  background-position: center; /* 将背景图居中 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  padding: 20px; /* 添加内边距 */
  border: 1px solid #ddd; /* 添加边框 */
  flex: 1; /* 占据剩余空间的一半 */
  border-radius: 8px; /* 添加圆角 */

}
.readers-ranking ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid; /* 使用 grid 布局 */
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 10px; /* 列间距 */
}

.readers-ranking li {
  display: flex;
  align-items: center;
  margin-bottom: 0; /* 移除底部间距 */
  width: 100%; /* 确保每个列表项占据整行 */
}
.readers-ranking h2 {
  margin-bottom:20px;
}
.readers-ranking .reader-avatar1 {
  margin-right: 30px; /* 增加头像和文字之间的距离 */
}
.excellent-readers {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  flex: 2; /* 占据剩余空间的两倍 */
}

.reader-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.reader-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ddd;
  padding: 5px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0); /* 半透明背景色 */
  border-radius: 8px; /* 添加圆角 */
  position: relative; /* 添加相对定位 */
  z-index: 1; /* 确保内容在背景图上方 */
}

/*.reader-avatar {*/
/*  width: 80px;*/
/*  height: 80px;*/
/*  object-fit: cover;*/
/*  margin-bottom: 5px;*/
/*}*/

.reader-name {
  font-size: 14px;
  color: #333;
  text-align: center;
}
.excellent-readers {
  background-image: url('@/assets/beijing1.png'); /* 替换为你的背景图路径 */
  background-size: cover; /* 使背景图覆盖整个容器 */
  background-position: center; /* 将背景图居中 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  padding: 20px;
  border: 1px solid #ddd;
  flex: 2; /* 占据剩余空间的两倍 */
}
.reader-avatar2 {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.reader-avatar1 {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

.sidebar {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ddd;
  flex: 1;
}
.sidebar h2{
  margin-bottom:20px;

}
.recommended-books {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid; /* 使用 grid 布局 */
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 10px; /* 列间距 */
}

.recommended-book-item {
  display: flex;
  align-items: center;
  margin-bottom: 0; /* 移除底部间距 */
}

.recommended-book-image {
  width: 50px;
  height: 75px;
  object-fit: cover;
  margin-right: 10px;
  transition: transform 0.3s ease;
}
.recommended-book-image:hover {
  transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */
}

.recommended-book-details {
  flex-grow: 1;
}

.recommended-book-title {
  font-size: 14px;
  margin: 0;
  transition: color 0.3s ease; /* 添加过渡效果 */
}
.recommended-book-title:hover {
  color: #007bff; /* 鼠标悬停时文字变为蓝色 */
}
.recommended-book-author {
  font-size: 12px;
  color: #666;
  margin: 3px 0;
}
.sidebar-with-background {
  background-image: url('@/assets/beijing1.png'); /* 替换为你的背景图路径 */
  background-size: cover; /* 使背景图覆盖整个容器 */
  background-position: center; /* 将背景图居中 */
  background-repeat: no-repeat; /* 防止背景图重复 */
}
.icon{
  width:35px;
  height: 35px;
  border-radius: 50%;
  vertical-align: middle;
}

.notice-content {
  text-align: center;
}

.notice-header {
  margin-bottom: 20px;
}

.notice-author,
.notice-createTime {
  display: block;
  margin: 5px 0;
}

.notice-body {
  text-align: left;
  margin-top: 20px;
}
</style>